<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue.js 选项卡切换案例</title>
        
        <script src="../../../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div>
                <button @click="showTab('login')">登录</button>
                <button @click="showTab('register')">注册</button>
                <button @click="showTab('home')">首页</button>
            </div>
            <hr />
            <component :is="currentTab"></component>
        </div>
        
        <script>
            var login = {
                template: '<div><h1>登录页</h1><p>下面请输入用户名密码啦啦啦</p></div>'
            };
            var register = {
                template: '<div><h1>注册页</h1><p>下面请输入注册信息哈哈哈</p></div>'
            };
            var home = {
                template: '<div><h1>首页</h1><p>这里是网站首页</p></div>'
            };
            
            var vm = new Vue({
                el: '#app',
                data: {
                    currentTab: 'home'
                },
                components: {
                    login: login,
                    register: register,
                    home: home
                },
                methods: {
                    showTab(tab) {
                        this.currentTab = tab;
                    }
                },
                });
        </script>
    </body>
</html>